import React, { InputHTMLAttributes, useEffect, useRef } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
interface Props extends InputHTMLAttributes<HTMLInputElement> {
  onExtraClick?: () => void
  className?: string
  autoFocus?: boolean
  extra?: string
  type?: 'password' | 'text'
}
export default function Input({ onExtraClick, className, autoFocus, extra, ...rest }: Props) {
  const inputRef = useRef<HTMLInputElement>(null)
  useEffect(() => {
    if (autoFocus) {
      inputRef.current!.focus()
    }
  }, [autoFocus])
  return (
    <div className={styles.root}>
      {/* input输入框 */}
      <input ref={inputRef} {...rest} type="text" className={classNames('input', className)} />
      {/* 验证码的那个盒子，如果有救渲染 如果没有 就不渲染 */}
      {extra && (
        <div className="extra" onClick={onExtraClick}>
          {extra}
        </div>
      )}
    </div>
  )
}
